<script setup lang="ts">
import { reactive, ref } from 'vue'
import TitleBar from '@/components/common/TitleBar.vue'
import TopBar from './TopBar.vue'
import BottomBar from './BottomBar.vue'
import ItemList from './ItemList.vue'
import type { CorpusItem } from '@/types'

const corpusList = reactive<CorpusItem[]>([
  {
    id: 1,
    question: '锁死',
    description: '开票软件锁死，征期内未清卡成功，锁死后需要到税局进行清卡工作',
    category: '全部分类',
    updateTime: '2019-01-01 11:30',
    hitCount: 7,
    checked: false,
  },
  {
    id: 2,
    question: '分税盘怎么办',
    description: '请您输入开票软件使用中出现的错误提示或关键词，以便于快速为您查找答案',
    category: '全部分类',
    updateTime: '2019-01-01 11:30',
    hitCount: 0,
    checked: true,
  },
  {
    id: 3,
    question: '增值税专票红字发票',
    description: 'https://mp.weixin.qq.com/s/tGm-hN903t6i3pXnKwprg',
    category: '全部分类',
    updateTime: '2019-01-01 11:30',
    hitCount: 5,
    checked: false,
  },
  {
    id: 4,
    question: '作废已开发票和空白发票方法!',
    description:
      '作废发票只能是作废本月未抄报的发票若发票已经跨月，请开具红字发票（具体开具方法请搜索红字发票）……',
    category: '全部分类',
    updateTime: '2019-01-01 11:30',
    hitCount: 13,
    checked: false,
  },
])

// 全选状态
const allChecked = ref(false)

// 处理全选框变更
const handleAllCheck = (checked: boolean) => {
  allChecked.value = checked
  corpusList.forEach((item) => {
    item.checked = checked
  })
}

// 处理单个列表项变更
const handleItemCheck = (id: number, checked: boolean) => {
  const target = corpusList.find((item) => item.id === id)
  if (target) target.checked = checked
  allChecked.value = corpusList.every((item) => item.checked)
}
</script>

<template>
  <div class="container">
    <title-bar>语料管理</title-bar>
    <top-bar />

    <!-- 主体 -->
    <div class="main">
      <item-list :list="corpusList" @item-check="handleItemCheck" />
    </div>

    <bottom-bar :all-checked="allChecked" @all-check="handleAllCheck" class="bottom-bar" />
  </div>
</template>

<style scoped>
.container {
  width: 100%;
  background-color: #fff;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 180px;
  right: 0;
}
</style>
